<template>
  <section>
    <el-row type="flex" justify="center">
      <el-form
        class="formbox"
        size="small"
        label-width="200px"
        :model="setPassForm"
        :rules="rules"
        ref="formss"
      >
        <el-form-item label="原密码：" prop="oldpass">
          <el-input type="password" v-model="setPassForm.oldpass" />
        </el-form-item>
        <el-form-item label="新密码：" prop="newpass">
          <el-input type="password" v-model="setPassForm.newpass" />
        </el-form-item>
        <el-form-item label="确认新密码：" prop="newpassConfirg">
          <el-input type="password" v-model="setPassForm.newpassConfirg" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ResetPasswd">确定</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected phone!: any;
  protected setPassForm: any = {};
  protected rules: any = {
    newpassConfirg: [],
    newpass: [{ required: true, message: "请输入新密码", trigger: "change" }],
    oldpass: [{ required: true, message: "请输入原密码", trigger: "change" }]
  };
  protected validatePass: any = (rule: any, value: any, callback: any) => {
    if (value === "") {
      callback(new Error("请再次输入密码"));
    } else if (value !== this.setPassForm.newpass) {
      callback(new Error("两次输入密码不一致!"));
    } else {
      callback();
    }
  }
  protected created() {
    this.$set(this.rules.newpassConfirg, 0, {
      required: true,
      validator: this.validatePass,
      trigger: "blur"
    });
  }

  protected async ResetPasswd() {
    (this.$refs.formss as any).validate(async (valid: boolean) => {
      if (valid) {
        if (this.setPassForm.newpassConfirg === "") {
          this.$message({
            message: "请再次输入密码",
            type: "error"
          });
        } else if (
          this.setPassForm.newpass !== this.setPassForm.newpassConfirg
        ) {
          this.$message({
            message: "两次输入密码不一致!",
            type: "error"
          });
        } else {
          const params: any = {
            oldpass: this.setPassForm.oldpass,
            newpass: this.setPassForm.newpass,
            phone: this.phone
          };
          await this.$api.accountResetPasswd(params);
        }
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.formbox {
  .el-input {
    width: 20vw;
  }
}
</style>


